<template>
  <div class="container">
    <el-row>
      <el-col>
        <h1>welcome to register</h1>
        <el-form :rules="rules" :model="loginData" ref="checkvalid" label-position="left">
          <el-form-item label="account：" prop="username" label-width="80px">
            <el-input v-model="loginData.username" />
          </el-form-item>
          <el-form-item label="password：" prop="password" label-width="80px">
            <el-input type="password" v-model="loginData.password" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="registerMethod">register</el-button>
            <el-button type="primary" @click="function () { $router.push('/login') }">back to login</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "RegisterPage",
  data(){
    return {
      loginData:{
        username:'',
        password:''
      },
      rules: {
        username: [
          { required: true, message: "Please enter username", trigger: "blur" },
        ],
        password: [
          { required: true, message: "Please enter password", trigger: "blur" },
        ],
        sex: [
          { required: true, message: "Please select sex", trigger: "change" },
        ],
      },
    }
  },
  methods: {
    registerMethod() {
      console.log('注册按钮被点击');
      // 在这里执行注册操作，例如调用 API
    },
  },

}
</script>


<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 0 20px;
}

.login {
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>